<template>
  <el-dialog title="撤销调度"
             top="25vh"
             width="400px"
             class="dialog-box"
             append-to-body
             :visible="visible"
             @update:visible="handleVisible">
    <RejectForm v-model="recall"
                ref="form" />
    <div slot="footer">
      <el-button type="default"
                 @click="handleClose">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="handleSubmit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import WaybillMixin from "./waybill.mixin";
import RejectForm from "@/components/basic/RejectForm.vue";

export default {
  name: "WaybillRecallSubmit",
  components: { RejectForm },
  mixins: [WaybillMixin],
  props: {
    value: Object,
    visible: Boolean,
    beforeSubmit: Function,
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      recall: {
        reason: ""
      }
    };
  },
  computed: {},
  created () { },
  methods: {
    handleBeforeSubmit () {
      if (typeof this.beforeSubmit !== "function") {
        return true;
      }
      return this.beforeSubmit(this.recall);
    },
    handleClose () {
      this.$emit("update:visible", false);
    },
    handleVisible (visible) {
      this.$emit("update:visible", visible);
    },
    handleInput (recall) {
      this.recall = recall;
    },
    async handleSubmit () {
      if (!this.handleBeforeSubmit()) {
        console.log("Handle before submit false", JSON.stringify(this.recall));
        return;
      }

      await this.$refs.form.validate();

      this.$emit("submit", this.recall);
    }
  }
};
</script>
<style scoped>
.dialog-box >>> .el-dialog__body {
  max-height: 460px !important;
  overflow: auto !important;
}
</style>
